<template>
  <div class="app-container">
    <el-form :model="queryParam" ref="queryForm" :inline="true">
      <el-form-item label="用户名：">
        <el-input v-model="queryParam.userName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">查询</el-button>
        <router-link :to="{path:'/user/student/edit'}" class="link-left">
          <el-button type="primary">添加</el-button>
        </router-link>
      </el-form-item>
    </el-form>

    <el-table v-loading="listLoading" :data="tableData" border fit highlight-current-row style="width: 100%">
      <el-table-column prop="userId" label="Id" />
      <el-table-column prop="userName" label="用户名"/>
      <el-table-column prop="realName" label="真实姓名" />
      <el-table-column prop="userLevel" label="学级"  :formatter="levelFormatter"/>
      <el-table-column prop="sex" label="性别" width="60px;" :formatter="sexFormatter"/>
      <el-table-column prop="phone" label="手机号"/>
      <el-table-column prop="wxOpenId" label="微信"/>
      <el-table-column prop="targetUniversity" label="目标院校"/>
      <el-table-column prop="targetMajor" label="目标专业"/>
      <el-table-column prop="createTime" label="创建时间" width="160px"/>
      <el-table-column label="状态" prop="status" width="70px">
        <template slot-scope="{row}">
          <el-tag :type="statusTagFormatter(row.status)">
            {{ statusFormatter(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column width="270px" label="操作" align="center">
        <template slot-scope="{row}">
          <el-button size="mini"  @click="changeStatus(row)" class="link-left">
            {{ statusBtnFormatter(row.status) }}
          </el-button>
          <!-- 定义一个路由链接，点击后导航到用户编辑页面 -->
          <router-link :to="{path:'/user/student/edit', query:{id:row.userId}}" class="link-left">
            <!-- 定义一个按钮，点击后触发路由链接 -->
            <el-button size="mini" >编辑</el-button>
          </router-link>

          <router-link :to="{path:'/log/user/list', query:{userId:row.userId}}" class="link-left">
            <el-button size="mini" >日志</el-button>
          </router-link>
          <el-button  size="mini" type="danger" @click="deleteUser(row)" class="link-left">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParam.pageIndex" :limit.sync="queryParam.pageSize"
                @pagination="search"/>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import Pagination from '@/components/Pagination'
import userApi from '@/api/user'

/**
 * 用户管理 - 学生列表组件
 */
export default {
  // 注册分页组件
  components: { Pagination },
  data () {
    // 返回一个对象，包含查询参数、列表加载状态、表格数据和总条数
    return {
      // 查询参数对象，包含用户名、角色、页码和每页条数
      queryParam: {
        userName: '',
        role: 1,
        pageIndex: 1,
        pageSize: 10
      },
      // 列表加载状态，初始值为 true
      listLoading: true,
      // 表格数据，初始值为空数组
      tableData: [],
      // 总条数，初始值为 0
      total: 0
    }
  },
  created () {
    // 在组件创建时调用 search 方法，初始化表格数据
    this.search()
  },
  methods: {
    /**
     * 搜索方法，用于根据查询参数获取用户列表数据
     */
    search () {
      // 设置列表加载状态为 true
      this.listLoading = true
      // 调用 userApi.getUserPageList 方法，传入查询参数
      userApi.getUserPageList(this.queryParam).then(data => {
        // 获取响应数据
        const re = data.response
        // 将表格数据设置为响应数据中的列表
        this.tableData = re.list
        // 设置总条数为响应数据中的总条数
        this.total = re.total
        // 设置当前页码为响应数据中的页码
        this.queryParam.pageIndex = re.pageNum
        // 设置列表加载状态为 false
        this.listLoading = false
      })
    },
    /**
     * 修改用户状态方法
     * @param {Object} row - 表格行数据
     */
    changeStatus (row) {
      // 保存当前组件实例的引用
      let _this = this
      // 调用 userApi.changeStatus 方法，传入用户 ID
      userApi.changeStatus(row.userId).then(re => {
        // 判断响应代码是否为 1
        if (re.code === 1) {
          // 更新行数据中的状态
          row.status = re.response
          // 显示成功消息
          _this.$message.success(re.message)
        } else {
          // 显示错误消息
          _this.$message.error(re.message)
        }
      })
    },
    /**
     * 删除用户方法
     * @param {Object} row - 表格行数据
     */
    deleteUser (row) {
      // 保存当前组件实例的引用
      let _this = this
      // 调用 userApi.deleteUser 方法，传入用户 ID
      userApi.deleteUser(row.userId).then(re => {
        // 判断响应代码是否为 1
        if (re.code === 1) {
          // 调用搜索方法，刷新表格数据
          _this.search()
          // 显示成功消息
          _this.$message.success(re.message)
        } else {
          // 显示错误消息
          _this.$message.error(re.message)
        }
      })
    },
    /**
     * 提交表单方法，用于触发搜索
     */
    submitForm () {
      // 设置当前页码为 1
      this.queryParam.pageIndex = 1
      // 调用搜索方法
      this.search()
    },
    /**
     * 格式化枚举值方法
     * @param {Object} enumObj - 枚举对象
     * @param {Number} value - 要格式化的值
     * @returns {String} - 格式化后的字符串
     */
    enumFormat (enumObj, value) {
      // 遍历枚举对象
      for (const key in enumObj) {
        // 如果枚举对象的键值等于要格式化的值
        if (enumObj[key] === value) {
          // 返回枚举对象的键
          return key
        }
      }
      // 如果没有找到匹配的值，返回空字符串
      return ''
    },
    /**
     * 格式化用户级别方法
     * @param {Object} row - 表格行数据
     * @param {Object} column - 表格列数据
     * @param {Number} cellValue - 单元格值
     * @param {Number} index - 单元格索引
     * @returns {String} - 格式化后的字符串
     */
    levelFormatter (row, column, cellValue, index) {
      // 调用 enumFormat 方法，传入级别枚举对象和单元格值
      return this.enumFormat(this.levelEnum, cellValue)
    },
    /**
     * 格式化用户性别方法
     * @param {Object} row - 表格行数据
     * @param {Object} column - 表格列数据
     * @param {Number} cellValue - 单元格值
     * @param {Number} index - 单元格索引
     * @returns {String} - 格式化后的字符串
     */
    sexFormatter (row, column, cellValue, index) {
      // 调用 enumFormat 方法，传入性别枚举对象和单元格值
      return this.enumFormat(this.sexEnum, cellValue)
    },
    /**
     * 格式化用户状态方法
     * @param {Number} status - 用户状态值
     * @returns {String} - 格式化后的字符串
     */
    statusFormatter (status) {
      // 调用 enumFormat 方法，传入状态枚举对象和状态值
      return this.enumFormat(this.statusEnum, status)
    },
    /**
     * 格式化用户状态标签方法
     * @param {Number} status - 用户状态值
     * @returns {String} - 格式化后的字符串
     */
    statusTagFormatter (status) {
      // 调用 enumFormat 方法，传入状态标签枚举对象和状态值
      return this.enumFormat(this.statusTag, status)
    },
    /**
     * 格式化用户状态按钮方法
     * @param {Number} status - 用户状态值
     * @returns {String} - 格式化后的字符串
     */
    statusBtnFormatter (status) {
      // 调用 enumFormat 方法，传入状态按钮枚举对象和状态值
      return this.enumFormat(this.statusBtn, status)
    }
  },
  computed: {
    // 使用 mapGetters 辅助函数映射获取 vuex 中的 enumFormat 方法
    ...mapGetters('enumItem', [
      'enumFormat'
    ]),
    // 使用 mapState 辅助函数映射获取 vuex 中的枚举对象
    ...mapState('enumItem', {
      // 用户性别枚举对象
      sexEnum: state => state.user.sexEnum,
      // 用户状态枚举对象
      statusEnum: state => state.user.statusEnum,
      // 用户状态标签枚举对象
      statusTag: state => state.user.statusTag,
      // 用户状态按钮枚举对象
      statusBtn: state => state.user.statusBtn,
      // 用户级别枚举对象
      levelEnum: state => state.user.levelEnum
    })
  }
}

</script>
